<template>
  <div class="flex">
    <el-select
      v-model="provinceValue"
      placeholder="请选择"
      no-data-text="无数据"
      @change="provinceChange"
    >
      <el-option
        v-for="item in provinceList"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      >
      </el-option>
    </el-select>

    <el-select
      v-model="cityValue"
      placeholder="请选择"
      no-data-text="无数据"
      @change="cityChange"
    >
      <el-option
        v-for="item in cityList"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      >
      </el-option>
    </el-select>

    <el-select
      v-model="areaValue"
      placeholder="请选择"
      no-data-text="无数据"
      @change="areaChange"
    >
      <el-option
        v-for="item in areaList"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
import { getAreaList } from "@/api/getArea";

export default {
  name: "AddressSelect",
  props: {
    provinceV: {
      type: Number,
      default: 1234,
    },
    cityV: {
      type: Number,
      default: 1235,
    },
    areaV: {
      default: 1236,
    },
  },
  data() {
    return {
      cityIdList: [undefined, undefined, undefined],

      // 省市区列表
      provinceList: [],
      areaList: [],
      cityList: [],
    };
  },
  computed: {
    provinceValue: {
      get() {
        this.getSpecificAreaFun(this.provinceV, "cityList");
        return this.provinceV;
      },
      set(val) {
        this.$emit("update:provinceV", val);
      },
    },
    cityValue: {
      get() {
        this.getSpecificAreaFun(this.cityV, "areaList");
        return this.cityV;
      },
      set(val) {
        this.$emit("update:cityV", val);
      },
    },
    areaValue: {
      get() {
        return this.areaV;
      },
      set(val) {
        if (val) {
          this.$emit("update:areaV", val);
        } else {
          this.$emit("update:areaV", "");
        }
      },
    },
  },
  created() {
    this.getSpecificAreaFun();
  },
  mounted() {},
  methods: {
    /* 查询省市区信息 */
    getSpecificAreaFun(parentid = 0, thisName = "provinceList") {
      return new Promise((resolve) => {
        this[thisName] = [];
        getAreaList({ parentid: String(parentid) }).then((res) => {
          if (res.code === 200) {
            if (thisName) {
              this[thisName] = res.data.childern;
              resolve(res.data);
            }
          }
        });
      });
    },
    async provinceChange(cityCode) {
      let cityList = await this.getSpecificAreaFun(cityCode, "cityList");

      this.cityValue = cityList[0]["id"];
      this.cityChange(cityList[0]["id"]);

      // this.areaValue = 0
      // this.$emit('getaddress', this.cityIdList)
    },
    async cityChange(cityCode) {
      if (!cityCode) {
        this.areaList = [];
        return;
      }
      this.areaValue = "";
      let areaList = await this.getSpecificAreaFun(cityCode, "areaList");

      if (areaList.length > 0 && areaList[0].id) {
        this.areaValue = areaList[0]["id"];
      } else {
        this.areaValue = "";
      }

      // this.$emit('getaddress', this.cityIdList)
    },
    areaChange() {
      // this.$emit('getaddress', this.cityIdList)
    },

    getCityInfo() {
      getAreaList({ parentid: 0 }).then((res) => {
        console.log("获取城市信息");
        console.log(res);
      });
    },
  },
};
</script>

<style></style>
